:root {
  --e-color-border: #e1e1e1;
  --e-color-emoji-text: #666;
  --e-color-border-emoji-hover: #e1e1e1;
  --e-color-bg: #fff;
  --e-bg-emoji-hover: #f8f8f8;
  --e-size-emoji-text: 16px;
  --e-width-emoji-img: 20px;
  --e-height-emoji-img: 20px;
  --e-max-width: 288px;
}

.emoji-wrap {
  display: none;
  position: absolute;
  padding: 8px;
  max-width: var(--e-max-width);
  background-color: var(--e-color-bg);
  border: 1px solid var(--e-color-border);
  border-radius: 4px;
  z-index: 3;
  &::before,
  &::after {
    position: absolute;
    content: '';
    margin: 0;
    width: 0;
    height: 0;
  }
  &:after {
    top: -9px;
    left: 14px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--e-color-border);
  }
  &::before {
    top: -8px;
    left: 14px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--e-color-bg);
    z-index: 1;
  }
}

.emoji-list {
  display: flex;
  flex-wrap: wrap;
}

.emoji-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 6px;
  color: var(--e-color-emoji-text);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  user-select: none;
  &:hover {
    background: var(--e-bg-emoji-hover);
    border-color: var(--e-color-border-emoji-hover);
    & > .emoji-text {
      transform: scale(1.2);
      transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 2);
    }
  }
}

.emoji-text {
  font-size: var(--e-size-emoji-text);
  font-weight: 500;
  line-height: 1.2em;
  white-space: nowrap;
}

.emoji-img {
  width: var(--e-width-emoji-img);
  height: var(--e-height-emoji-img);
}

.emoji-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
  z-index: -1;
}

.anim-scale-in {
  animation-name: scale-in;
  animation-duration: 0.15s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
